<template>

  <div slot="center" style>
    <a-row>
      <a-col :span="12">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.msgItem','消息项目')">
          <a-button  type="primary" @click="addMsgDef">{{$ti18('rxList.addOne','添加')}}</a-button>
        </a-form-item>
      </a-col>
      <a-col :span="12">
      </a-col>
    </a-row>
    <a-table :columns="columns" :dataSource="listData" bordered class="addclack" :pagination="false">
      <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
      <span slot="content" slot-scope="text, record, index">{{ text.content }}</span>
      <span slot="action" slot-scope="text, record, index">
          <a href="javascript:;" @click="delByMsfId(index)">{{$ti18('rxList.delBtn','删除')}}</a>
        </span>
    </a-table>
  </div>

</template>

<script>
  import InsMsgDefApi from '@/api/portal/core/insMsgDef'
  import InsMsgDefEdit from './InsMsgDefEdit'

  import {BaseList, RxDialog, Util} from "@lowcode/jpaas-common-lib"

  import InsMsgDialog from './InsMsgDialog';




  export default {
    name: 'InsMsgDefList01',
    mixins: [BaseList],
    components: {
      RxDialog,
      InsMsgDialog, Util
    },
    props: {
      msgDefLoadData: {
        type: Array,
        default: []
      }
    },
    created() {
      this.listData = this.msgDefLoadData;
    },
    data() {
      return {
        columns: [
            {
                title: this.$ti18('rxList.index','序号'),
                key: 'index',
                scopedSlots: {customRender: 'serial'},
            },
            {
                title: this.$ti18('rxList.title','标题'),
                key: 'content',
                scopedSlots: {customRender: 'content'},
            },
            {
                title: this.$ti18('rxList.action','操作'),
                key: 'action',
                scopedSlots: {customRender: 'action'},
            },
        ],
        listData: [],
        component: InsMsgDefEdit,
        comment: 'INS_MSG_DEF',
        widthHeight: ['800px', '600px'],
        labelCol:{
          span:6
        },
        wrapperCol:{

        }
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"InsMsgboxDef",key);
      },
      emitMsfDdfList() {
        this.$emit("changeMsfDdfList", this.listData);
      },
      delByMsfId(indexs) {
        this.listData.splice(indexs, 1);
        var newListDat = [];
        for (var i = 0; i < this.listData.length; i++) {
          var obj = this.listData[i];
          var insMsgDef = {
            index: i,
            content: obj.content,
            msgId: obj.msgId
          };
          newListDat.push(insMsgDef);
        }
        this.listData = newListDat;
        this.emitMsfDdfList();
      },
      addMsgDef() {
        var self_ = this;
        var baseConf = {
          component: InsMsgDialog,
          title: this.i18n('form.msgTitle','选择消息项目')
        };
        InsMsgDefApi.openMsgDefDialog(baseConf, {
          curVm: this, data: { single: false}, widthHeight: ['800px', '600px']
        }, function (self_, dataList) {
          for (var i = 0; i < dataList.length; i++) {
            var dataObj = dataList[i];
            var indexs = self_.listData.length;
            var insMsgDef = {
              index: indexs,
              content: dataObj.content,
              msgId: dataObj.msgId
            };
            self_.listData.push(insMsgDef);
          }
          self_.emitMsfDdfList();
        });
      },
    }
  }
</script>
<style scoped>

  .addclack {
    width: 92%;
    margin: auto;
  }

  .addclack_hert {
    width: 100%;
  }

  .colors {
    color: #fff;
    background: #1890ff;
  }
</style>

